<template>
    <div class="coach">
        <div class="coachData">
            <p class="coachTitle">{{coachTitle}}</p>
            <!-- 父元素循环 -->
            <div class="coachFor" v-for="(item) in coachdata" :key="item.id">
                <!-- 将子元素抽离成一个组件 -->
                <CoachItem :item="item"/>
            </div>
        </div>
    </div>
</template>
<script>

import CoachItem from "./coachItem"

export default {
    name:"CoachList",
    data(){
        return{
            coachTitle:"",
            coachdata:[],
            news:0
            
        }
    },
    components:{
        CoachItem
    },
    props:{
        coachData:{
            type:Object,
            default:function(){
                return {}
            }
        }
    },
    methods:{
      
    },
    mounted(){
        // console.log(this.coachData.title)
        // console.log(this.coachData.coachdata)
        // console.log(this.coachData.title)
        // console.log(this.coachdata)
        this.coachTitle=this.coachData.title
        this.coachdata=this.coachData.coachdata
        

    }
}
</script>
<style scoped lang="less">
.coach{
    color: #171818;
    overflow: hidden;
    .coachData{
        margin-top: 2.5rem;
        margin-bottom: 2.5rem;
        .coachTitle{
            background-color: #ffffff;
            text-align: center;
            padding: 8px 0;
            border-bottom: 2px solid #efefef;
        }
        .coachFor{
            background-color: #ffffff;
            width: 100%;
            padding: 5px;
            height: 3rem;
            line-height: 2.5rem;
            box-sizing: border-box;
            margin-bottom: 10/20rem;
        
        }
    }
}

</style>

